<%--
  Created by IntelliJ IDEA.
  User: 张乐
  Date: 2025/5/12
  Time: 19:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page isELIgnored="false" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>套餐余量查询</title>
    <!-- 引入 Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <!-- 引入 Font Awesome 图标库 -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <script src="js/jquery-2.1.0.js"></script>
    <script>
        $(document).ready(function() {
            $.ajax({
                url: '${pageContext.request.contextPath}/yuliangquery',
                method: 'GET',
                success: function(response) {
                    console.log("响应数据:", response); // 调试用
                    if (response.taocan) {
                        // 填充表格数据
                        $('#usernumberResult').text(response.taocan.usernumber || "N/A");
                        $('#timeResult').text((response.taocan.time || 0) + "分钟");
                        $('#duanxinResult').text((response.taocan.duanxin || 0) + "条");
                        $('#liuliangResult').text((response.taocan.liuliang || 0) + "G");
                        $('#errorMsg').addClass('d-none'); // 隐藏错误信息
                    } else {
                        $('#errorMsg').removeClass('d-none').text(response.error || "未知错误");
                        if (response.error && response.error.includes("未登录")) {
                            setTimeout(() => window.location.href = "login.jsp", 2000);
                        }
                    }
                },
                error: function(xhr) {
                    console.error("请求失败:", xhr.status, xhr.responseText);
                    $('#errorMsg').removeClass('d-none').text("请求失败: " + xhr.status);
                }
            });
        });
    </script>
</head>
<body>
<div class="container my-5">
    <h1 class="text-center mb-4">套餐余量查询结果</h1>
    <div class="row justify-content-center">
        <div class="col-md-8">
            <p id="errorMsg" class="text-danger d-none"></p>
            <table class="table table-striped table-bordered">
                <thead class="table-dark">
                <tr>
                    <th>用户号码</th>
                    <th>通话时长</th>
                    <th>短信条数</th>
                    <th>上网流量</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td id="usernumberResult"></td>
                    <td id="timeResult"></td>
                    <td id="duanxinResult"></td>
                    <td id="liuliangResult"></td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<!-- 引入 Bootstrap 5 JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>